

<template>
  <el-container class="login-container">
    <el-header style="justify-content: center">
      <el-row >
        <el-col style="display: flex;justify-content: center">
          <span class="login-title">智慧养老服务平台</span>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row :gutter="40">
        <el-col :span="8">
        </el-col>
        <el-col :span="8">
          <el-card style="margin-top: 80px">
            <h3 style="text-align: center">用户登录</h3>
            <el-form label-position="top">
              <el-form-item label="用户名">
                <el-input v-model="loginData.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="loginData.password" placeholder="请输入密码" type="password"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="doLogin" style="width:100%">登录</el-button>
              </el-form-item>
            </el-form>
            <div style="text-align: center;color:#666;font-size: 14px;padding:10px 0;">(体验帐号:tom 密码:123456)</div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import {reactive} from 'vue';
import { useUserStore } from "@/store/module/userStore.js";
import {storeToRefs} from "pinia";

const loginData = reactive({username: '', password: ''});
const { loginAction } = useUserStore();
const { getToken } = storeToRefs(useUserStore());


const doLogin = async () => {
  await loginAction(loginData);
  console.log(getToken.value,'getToken')
}
</script>
<style lang="less" scoped>
.login-container{
  height:100%;
  padding:30px;
  background-image: url("@/assets/images/login/login_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  .login-title{
    color:#fff;
    font-weight: bold;
    font-size: 30px
  }
}
</style>